<script setup lang="ts">
import { reactive, watch, ref, onMounted, nextTick } from 'vue'

const props = defineProps<{
  print: Array<any>
  tableData: Array<any>
}>()

console.log(props.tableData, 'props.tableData')

const flag = ref(false)
</script>
<template>
  <div class="NoPlanYet-box" v-if="props.tableData.length == 0">
    <p>暂无方案</p>
  </div>
  <div>
    <div class="solution-box">
      <p class="solution" @mouseover="() => (flag = true)">
        {{ props.print[0].pvalue }}
      </p>
      <p class="solution" @mouseover="() => (flag = false)">
        {{ props.print[0].solution_two }}
      </p>
    </div>

    <div class="table-box">
      <table v-if="props.tableData.length > 0">
        <tr
          v-for="(value, index) in props.tableData"
          :key="value.distributor_id"
          class="headerCell"
        >
          <td class="cell" v-if="index == 0">
            {{ value.distributor_id_desc }}
          </td>
          <td class="cell" v-if="index == 0">
            {{ value.distributor_name_desc }}
          </td>
          <td class="cell" v-if="index == 0">{{ value.cur_level_desc }}</td>
          <td class="cell" v-if="index == 0">{{ value.target_level_desc }}</td>
        </tr>
        <tr
          class="table_tr"
          v-for="(item, index) in props.tableData"
          :key="index"
        >
          <td class="cell">
            {{ item.distributor_id }}
          </td>

          <td>
            {{ item.distributor_name }}
          </td>

          <td>
            {{ item.cur_level }}
          </td>
          <td>
            {{ item.target_level }}
          </td>
        </tr>
      </table>
    </div>
    <!-- <div class="table-box" v-else>
      <table>
        <tr class="headerCell">
          <td class="cell">经销商ID</td>
          <td class="cell">姓名</td>
          <td class="cell">当前星级</td>
          <td class="cell">升级星级</td>
        </tr>
        <tr class="table_tr" v-for="(item, index) in tableData" :key="index">
          <td class="cell">
            {{ item.id }}
          </td>
          <td>
            {{ item.name }}
        
          </td>

          <td>
            {{ item.star }}
          </td>
          <td>
            {{ item.frameworkLevel }}
          </td>
        </tr>
      </table>
    </div> -->
  </div>
</template>
<style lang="scss" scoped>
.solution-box {
  display: flex;
  font-size: 16px;
  width: 120px;
  justify-content: space-between;
  margin: 0 20px 5px 20px;
}
.table-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  table {
    width: 95%;

    border-collapse: separate;
    border-spacing: 0 5px;

    td {
      width: 25%;
      text-align: center;
      padding: 10px;
      border: none;
      color: rgb(0, 234, 252);
      font-size: 12px;
    }
    .table_tr {
      width: 100%;
      background-color: rgba(5, 33, 46, 0.5);
      .cell {
        color: rgb(255, 255, 255);
      }
    }
    .headerCell {
      background-color: rgba(3, 90, 102, 0.7);
      font-size: 12px;
      .cell {
        color: rgb(255, 255, 255);
      }
    }
  }
}

.solution {
  width: 60px;

  text-align: center;
  line-height: 30px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
}

:hover.solution {
  border-bottom: 2px solid #00f6ff;
}
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
